OACを利用したCloudFront + S3の静的ウェブサイトをTerraformで作成してみた 〜CodePipelineを添えて〜
こんにちは！AWS事業本部コンサルティング部のたかくに（@takakuni_）です。
今回は、Terraformを利用してOAC対応のCloudFront + S3構成を作成してみようと思います。
また、S3へのデプロイはCodePipelineを利用した構成にしてみようと思います。
構成図
今回の構成は次のイメージです。要点は次のとおりです。
- EventBridge：CodeCommitレポジトリの変更をトリガーにCodePipelineをスタート。
- CodePipeline：CodeCommitをソースとして、S3へアーティファクトを解凍してデプロイ。
- KMS：S3のサーバーサイド暗号化に使用。コストの削減のためバケットキーを利用。
- CloudFront：デフォルトルートオブジェクトに静的ウェブサイトを利用。OAC経由でS3へアクセス。
- S3（アーティファクト）：CodeCommitのソースアーティファクトを格納。ACL無効化。暗号化にはSSE:KMS。ライフサイクルルールを付けても尚よし。
- S3（静的ウェブサイト）：静的ウェブサイトで利用。ACL無効化。暗号化にはSSE：KMS。CodeCommitでバージョン管理しているためバージョニングは今回は無効。
やってみた
では実際にデプロイしてみようと思います。
今回利用するコードは、以下に格納されています。適宜カスタマイズしてお使いいただけると嬉しいです。
初回デプロイ時は、CodeCommitにソースコードをプッシュしていないため、パイプラインが失敗します。
ソースコードの追加
それではCodeCommitレポジトリへコードの追加を行います。今回は非常に簡単なHTMLファイルをCodeCommitレポジトリにプッシュします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Static Web Hosting Pipeline</title>
</head>
<body>
CodePipeline Deployment v1.
</body>
</html>
私はマネジメントコンソール上で行いましたが、適宜使いやすいツールでコードのプッシュいただければと思います。
CodePipelineの確認
CodeCommitへのプッシュをトリガーにEventBridgeルールがトリガーされる仕組みになっています。
デプロイが完了すると次のような画面になっているかと思います。
Webサイトの確認
CloudFrontで提供されているドメイン名から確認してみます。
デプロイが問題なく成功していると、CodeCommitにプッシュされたindex.htmlが表示されていると思います。
参考
まとめ
以上、「OACを利用したCloudFront + S3の静的ウェブサイトをTerraformで作成してみた 〜CodePipelineを添えて〜」でした！
これから、OACをガンガン使えるようテンプレート化してみました！この記事がどなたかの参考になれば幸いです。
AWS事業本部コンサルティング部のたかくに（@takakuni_）でした！
![[REPORT] How to analyze Amazon CloudFront logs using generative #CDN304 #AWSreInvent](https://images.ctfassets.net/ct0aopd36mqt/53SNOsU11M3m4DqvPA0xlI/6c4e2658f47b8521afbac66d1cb1c792/eng-reinvent-2024-sessionreport.jpg)
![[レポート] How to analyze Amazon CloudFront logs using generative AI に参加しました #CDN304 #AWSreInvent](https://images.ctfassets.net/ct0aopd36mqt/3IQLlbdUkRvu7Q2LupRW2o/edff8982184ea7cc2d5efa2ddd2915f5/reinvent-2024-sessionreport-jp.jpg)
